<template>
  <slash-panel>
    <slash-panel-header title="用户表"/>
    <slash-panel-body>
      <n-space vertical size="large">
        <n-layout has-sider>
          <n-layout-sider
              collapse-mode="width"
              :collapsed-width="0"
              :width="320"
              show-trigger="arrow-circle"
              content-style="padding: 0px;"
              bordered
          >
            <p>
              <AuthTbDeptTree @select="onSelect"/>
            </p>
          </n-layout-sider>
          <n-layout-content content-style="padding: 0px;">
            <div class="ml-4">
              <AuthTbUserList ref="listRef" :queryFormValue="queryForm" class="ml-4"/>
            </div>
          </n-layout-content>
        </n-layout>
      </n-space>
    </slash-panel-body>
  </slash-panel>
</template>

<script lang="ts">
import {SlashPanel, SlashPanelBody, SlashPanelHeader} from "slash-admin";
import AuthTbUserList from "./AuthTbUserList.vue";
import {ref} from "vue"
import AuthTbDeptTree from "../AuthTbDept/AuthTbDeptTree.vue"


export default {
  name: "AuthTbUserEntry",
  components: {AuthTbUserList, SlashPanelBody, SlashPanelHeader, SlashPanel, AuthTbDeptTree},
  setup() {
    const queryForm = ref<any>({});
    const listRef = ref<any>(null);
    const onSelect = (option) => {
       queryForm.value.fkDeptCode=option.fullDeptCode;
      setTimeout(() => {
        listRef.value.resetPageReload();
      }, 50);
    }
    return {
      onSelect,
      listRef,
      queryForm
    }
  }
}
</script>

<style scoped>

</style>
